<template>
  <form-dialop
    :title="$t('workOrder.detail')"
    :visible="visible"
    width="20%"
    class="orderdetails"
    @handleClose="handleClose"
  >
    <template #content>
        <div :class="'content'">
            <el-descriptions title="" :column="num">
                <el-descriptions-item :label="$t('workOrder.information')" labelStyle="font-size:14px" contentStyle="width:250px;font-size:14px">
                    {{orderData.description}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AppModule } from '../../../store/modules/app';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      allData: '',
      otherData: '',
      num: 1,
      arrayData: [],
      dataTotal: 1,
      showData: '',
      orderData:{},
    }
  },
  created() {
  },
  methods: {
    async init(data: any) {
        (this as any).orderData =  JSON.parse(JSON.stringify(data));
        this.visible = true;
    },
    handleClose() {
        this.arrayData = [];
        this.dataTotal = 1;
        this.currentPage = 1;
        this.visible = false;
        this.loading = false;
    }
  }
})
</script>
<style lang="scss" scoped>
.orderdetails {
  ::v-deep .el-dialog{
    width: 30% !important;
  }

  ::v-deep .el-dialog__body .content {
    padding: 16px 16px 16px 16px
  }

  ::v-deep .el-descriptions-item__content {
    width: 80% !important;
  }
}
.content {
    max-height: 500px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
}

</style>
